<template>
    <div class="fast">
        <div class="fast_top">
            <div>
                <span class="one"></span>
                <span class="two">限时抢购</span>
                <div class="djs">
                    <van-count-down :time="LiuFlashSaleData.end_time">
                        <template #default="timeData">
                            <span class="block">{{ timeData.hours }}</span>
                            <span class="colon">:</span>
                            <span class="block">{{ timeData.minutes }}</span>
                            <span class="colon">:</span>
                            <span class="block">{{ timeData.seconds }}</span>
                        </template>
                    </van-count-down>
                </div>
            </div>
            <div class="more">
                更多
            </div>
        </div>
        <div class="flash_bottom">
            <ul class="sliding_list"> 
                <li v-for="item in countDown" :key="item.id" @click="GoDetailPage(item)">
                    <img :src="item.small_image" alt="">
                    <p class="title">{{item.name}}</p>
                    <p class="price_o">￥{{item.price}}</p>
                    <p class="price_t">
                        ￥{{item.origin_price}}
                        <img src="../assets/car.png" alt="" @click.stop="shopping(item)">
                    </p>
                </li>
            </ul>
           
        </div>
        <!-- <div class="box"></div> -->
    </div>
</template>

<script>
export default {
    name:"FastView",
    props:["countDown","LiuFlashSaleData"],
    methods: {
        GoDetailPage(item){
            this.$store.commit('setDetailPageData',item)
            sessionStorage.setItem("setDetailPageData",JSON.stringify(item))
            this.$router.push('/DetailPage').catch(err=>{})
        },
        shopping(item){
            this.$store.commit('setShoppingData',item)
            this.$toast('成功加入购物车');
        }
    },
}
</script>

<style lang="less">
.fast{
    width: 100vw;
    height: 17rem;
    box-sizing: border-box;
    // background: #ccc;
    .fast_top{
        box-sizing: border-box;
        padding: 0 .4rem;
        width: 95%;
        margin: 0 auto;
        height: 4rem;
        line-height: 4rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        // background: pink;
        div{
            font-weight: bold;
            display: flex;
            align-items: center;
            .two{
                font-size: 1.2rem;
                font-weight: bold;
                margin-right: .7rem;

            }
            .one{
                
                width: .3rem;
                height: 2rem;
                display: inline-block;
                margin-right: .7rem;
                background: rgb(65, 187, 67);
            }
        }
        .more{
            color: rgb(65, 187, 67);
        }
    }
}
.colon {
    display: inline-block;
    margin: 0 4px;
    color: #38282a;
}
.block {
    display: inline-block;
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #1b1112;
}

.flash_bottom{
    width: 100vw;
    overflow: hidden;
    overflow-x: auto;
    // background-color: lime;
    .sliding_list{
        height: 12rem;
        display: flex;
        li{
            margin-right: .6rem;
            .title{
                height: 1.6rem;
                font-size: .9rem;
            }
            img{
                width: 7rem;
                height: 6rem;
            }
            .price_o{
                margin-top: .8rem;
                color: rgb(242, 53, 53);
                font-size: 1.2rem;
            }
            .price_t{
                // margin-top: .3rem;
                color: rgb(109, 109, 109);
                text-decoration: line-through;
                // font-weight: bold;
                img{
                    margin-left: .5rem;
                    width: 1.4rem;
                    height: 1.4rem;

                }
            }
        }
    }
   
}

</style>